<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>
    <script>
        //1.全局选择器
        //$(function(){}) 页面文档加载结束执行函数
        $(function () {
            $("*").css({
                "margin": "0",
                "padding": "0",
                "box-sizing": "border-box"
            })
            //2.标签选择器 所有的div  只设一个样式的话可以用的方法
            $("div").css("border", "1px solid black")

            //3.类选择器绑定一个点击事件
            $(".item").css("color", "red").click(function () {
                console.log(this.innerHTML);
            })

            //4.id选择器
            $("#app").css("color", "blue")

            //5.并集选择器
            $(".item,p,div,#app").css("background-color", "#ddd")
        })
    </script>
</head>

<body>
    <div id="app">这是有id属性的div</div>
    <div class="item">这是有class属性的div</div>
    <div>没有属性的div</div>
    <p>
        这是一个p元素
    </p>
</body>

</html>